<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-main {
            height: 420px
        }

        .footer_links {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 36px 0;
            text-align: center;
            zoom: 1;
        }

        li, ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer_links_list {
            float: left;
            font-size: 13px;
            margin-left: 10px;
            margin-right: 10px;
            color: #111;
        }

        footer a {
            text-decoration: none;
            color: black;
        }

        .footer_r_1 {
            zoom: 1;
            padding-bottom: 10px;
        }

        .footer_r_1_a {
            float: left;
            display: block;
            width: 98px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            background-color: #ff1268;
            color: #fff;
            font-size: 14px;
            border-radius: 20px;
        }

        .footer_r_words {
            padding-bottom: 6px;
        }

        .footer_r_words_word {
            float: left;
            font-size: 13px;
            color: #111;

        }

        .footer_r_words_line {
            float: left;
            padding: 0 15px;
        }

        .center {
            width: 1550px;
            margin: 0 auto
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="center" height="80px" style="width: 100%; background-color: #386582">
            <h1 style="color: white;
            font-size: 30px;margin: 0;line-height: 70px">小麦网后台管理系统
                <span style="float: right;font-size: 20px">
                    欢迎二狗回来!
                    <a href="" style="color: orange">退出登录</a>
                </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="currentIndex" @select="handleSelect" active-text-color="orange">
                    <!--          <img src="imgs/icon.png" width="150">-->
                    <!--          <el-divider></el-divider>-->
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-picture-outline-round"></i>分类管理</template>
                        <el-menu-item index="1-1">分类列表</el-menu-item>
                        <el-menu-item index="1-2">添加分类</el-menu-item>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-picture-outline-round"></i>轮播图</template>
                        <el-menu-item index="2-1">轮播图列表</el-menu-item>
                        <el-menu-item index="2-2">添加轮播图</el-menu-item>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-picture-outline-round"></i>商品管理</template>
                        <el-menu-item index="3-1">商品列表</el-menu-item>
                        <el-menu-item index="3-2">添加商品</el-menu-item>
                    </el-submenu>

                    <el-menu-item>
                        <i class="el-icon-picture-outline-round"></i>
                        <el-link href="大麦用户服务协议.html" type="primary">
                            修改密码
                        </el-link>
                    </el-menu-item>

                </el-menu>
            </el-aside>


            <el-main>
                <!--用户表格开始-->
                <el-table v-if="currentIndex=='1-1'" :data="userArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="userName" label="用户名"></el-table-column>
                    <el-table-column prop="nickName" label="昵称"></el-table-column>
                    <el-table-column label="管理员">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isAdmin"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--用户表格结束-->

                <!--轮播图表格开始-->
                <el-table v-if="currentIndex=='2-1'" :data="bannerArr">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column label="轮播图">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" width="200">
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--轮播图表格结束-->


            </el-main>
        </el-container>


        <el-footer style="background-color: #f8f8f8;height: 280px; margin:0 auto;width: 100%;">
            <div class="center" style="color: #666;width: 1200px">
                <div style="height: 80px;line-height:15px;margin: 0 ">
                    <ul class="footer_links">
                        <li class="footer_links_list"><a href="">帮助中心</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">公司介绍</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">品牌识别</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">公司大事记</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">协议及隐私政策</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">廉政举报</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">联系合作</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">招聘信息</a></li>
                        <li class="footer_links_list">|</li>
                        <li class="footer_links_list"><a href="">防骗秘籍</a></li>

                    </ul>
                </div>
                <div style="height: 172px;margin: 10px ">
                    <el-row gutter="20">
                        <el-col span="8">
                            <img src="imgs/首页log1.jpg" style="width:167px;height: 60px ;margin:15px">
                            <img src="imgs/二维码.jpg" style="width:87px;height: 87px;margin-right:30px">
                        </el-col>
                        <el-col span="16">
                            <div class="footer_r_1">
                                <a href="" class="footer_r_1_a">在线客服</a>
                            </div>
                            <br>


                            <ul class="footer_r_words">
                                <li class="footer_r_words_word">
                                    <a href="">京ICP证031057号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">京ICP备11043884号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">京公网安备11010502037341号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">广播电视节目制作经营许可证(京)字第02253号</a>
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    <a href="">网络文化经营许可证 京网文[2023]1649-054号</a>
                                </li>
                                <li class="footer_r_words_line">|</li>
                                <li class="footer_r_words_word">
                                    <a href="">营业性演出许可证京市演587号</a>
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    北京大麦文化传媒发展有限公司 版权所有大麦网Copyright 2003-2020 All Rights Reserved
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    举报投诉：damai_tousu@member.alibaba.com 浙江省杭州市余杭区文一西路969号
                                </li>
                                <br>
                                <li class="footer_r_words_word">
                                    违法不良信息举报电话：020-62108294
                                </li>
                            </ul>
                            <br>
                            <img src="imgs/首页电子执照.jpg " style="width: 100px;height: 30px ;float:left">
                            <img src="imgs/首页pci.jpg" style="width: 57px;height:30px ;float:left">
                            <img src="imgs/首页log1.jpg" style="width: 45px;height: 30px ;float:left">
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex: "1-1",
                userArr: [
                    {
                        "id": 12,
                        "nickName": "汤姆",
                        "userName": "tom",
                        "isAdmin": true,
                        "createTime": "2023/03/31 00:43:52"
                    },
                    {
                        "id": 13,
                        "nickName": "刘德华",
                        "userName": "ldh",
                        "isAdmin": false,
                        "createTime": "2023/03/25 15:03:08"
                    },
                    {
                        "id": 17,
                        "nickName": "杰瑞",
                        "userName": "jerry",
                        "isAdmin": false,
                        "createTime": "2023/05/11 20:40:44"
                    }
                ],
                bannerArr: [
                    {
                        id: 1, imgUrl: "imgs/奥特曼项目详情1.jpg",
                        code: "p001", createTime: "2023/5/27 14:00:20"
                    },
                    {
                        id: 2, imgUrl: "imgs/奥特曼项目详情2.jpg",
                        code: "p002", createTime: "2023/5/27 14:00:20"
                    },
                    {
                        id: 3, imgUrl: "imgs/奥特曼项目详情3.jpg",
                        code: "p003", createTime: "2023/5/27 14:00:20"
                    }],

            }
        },
        methods: {
            handleSelect(key, keyPath) {
                v.currentIndex = key;
            }

        }
    })
</script>
</html>